<template>
  <div class="visitor">
    <div :class="['flex',{'flex-horizontal-between':isbuildFlag!='nobuildpage'},{'flex-vertical-end ':isbuildFlag=='nobuildpage'}]">
      <p class="title">线索统计</p>
      <p class="view-more" style="margin-left:20px;" v-if="isbuildFlag=='nobuildpage'">点击下方数字可查看明细</p>
      <div class="flex flex-vertical-center" v-else>
        <p class="tips" v-if="showTips">
          <Icon type="md-information-circle" />
          <span>您有未关联的线索渠道，无法获取线索 <span class="link-btn"
              @click="relationClue">立即关联</span></span>
        </p>
        <p class="hand view-more" @click="viewMore('clueHome')"
          style="margin-left:20px;">查看更多<span style="margin-left:5px;">></span></p>
      </div>
    </div>
    <div class="flex">
      <ul class="flex flex-horizontal-between visitor-content">
        <li v-for="(item,index) in homeDataList.clueList"
          @click="linkPageFun(isbuildFlag=='nobuildpage'?customerClue[item.key]:customerClue[item.linkKey],item,checkParams)" :key="index"
          :class="['flex', 'flex-vertical-center', 'flex-wrap', 'position-relative','hand',{'line':index==0}]">
          <p class="text-center num width-100">{{customerClue[item.key] || 0}}</p>
          <Tooltip v-if="item.tips" class="position-absolute" theme="light"
            placement="top-start" style="top:0px;right:20%;">
            <Icon type="ios-help-circle-outline" color="#2d8cf0" :size="24" />
            <template slot="content">
              <p v-for="(tipsItem,tipsIndex) in item.tips" :key="tipsIndex">
                {{tipsItem}}</p>
            </template>
          </Tooltip>
          <p class="text-center text width-100">
            <span>{{ dataText }}</span>{{item.name}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import homeMgr from '@/biz/buildingHome/home'
  import { linkPage } from '@/biz/buildingHome/linkPage'
  export default {
    mixins: [linkPage],
    data() {
      return {
        isbuildFlag:'buildpage',
        homeDataList: {},
        customerClue: {}, // 线索
        dataText:'今日',
        showTips: false,
        checkParams:{}
      }
    },
    components: {
    },
    computed: {
    },
    watch: {
    },
    methods: {
      // 数据初始化
      dataInit(checkParams,dataText,res={}) {
        this.dataText = dataText
        this.checkParams = checkParams

        this.isbuildFlag = this.$tool.getStorage('isbuildFlag')
        // 默认选中当天
        this.homeDataList = homeMgr.homeDataList()
        this.customerClue = res.customer
      },
      // 线索客户
      getCustomerClue(params) {
        homeMgr
          .getClueCount(params)
          .then((res) => {
            this.customerClue = res
          })
          .catch((err) => {
            this.customerClue = {}
          })
      },

      // 关联线索
      relationClue() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId
        }
        channelMgr
          .atOnceRelationFun(params)
          .then((res) => {
            this.showTips = false
            this.$router.push({
              name: 'buildingConfigure',
              params: {
                fromCustomer: 'caseChannelList'
              }
            })
          })
      }
    },
    created() {
    },
    mounted() {

    },
  }
</script>
<style lang='scss' scoped>
  .visitor {
    background-color: #fff;
    padding: 20px 15px;
    width: 49.5%;
    border-radius: 5px;
    .line {
      border-right: 1px #dcdee2 solid;
    }

    .title {
      padding-left: 8px;
      color: #222;
      font-size: 18px;
      border-left: 2px solid #2298ff;
      font-weight: bolder;
    }

    .num {
      font-size: 24px;
      font-weight: bold;
      color: #222222;
    }

    .text {
      font-size: 14px;
      color: #666;
      margin-top: 10px;
    }

    .view-more {
      font-size: 12px;
      color: #2298ff;
    }
    .visitor-content {
      margin-top: 20px;
      li {
        padding: 0 20px;
      }
    }
  }
</style>